<template>
  <div class="empty-state">
    <div class="empty-icon">
      <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- 背景圆 -->
        <circle cx="60" cy="60" r="48" fill="#F5F6F7"/>

        <!-- 文档图标组合 -->
        <g transform="translate(36, 24)">
          <!-- 主文档 -->
          <path
            d="M8 0C6.89543 0 6 0.89543 6 2V46C6 47.1046 6.89543 48 8 48H40C41.1046 48 42 47.1046 42 46V12L30 0H8Z"
            fill="#E5E6EB"
          />
          <!-- 折角 -->
          <path
            d="M30 0L42 12H32C30.8954 12 30 11.1046 30 10V0Z"
            fill="#D8D9DE"
          />
          <!-- 装饰线条 -->
          <rect x="12" y="20" width="24" height="2" rx="1" fill="#C9CDD4"/>
          <rect x="12" y="26" width="18" height="2" rx="1" fill="#C9CDD4"/>
          <rect x="12" y="32" width="20" height="2" rx="1" fill="#C9CDD4"/>
        </g>

        <!-- 装饰元素 -->
        <circle cx="85" cy="35" r="3" fill="#C9CDD4"/>
        <circle cx="35" cy="85" r="2" fill="#C9CDD4"/>
        <circle cx="80" cy="80" r="2" fill="#C9CDD4"/>
      </svg>
    </div>
    <div class="empty-text">{{ text }}</div>
    <div class="empty-subtext" v-if="subText">{{ subText }}</div>
    <slot name="extra"></slot>
  </div>
</template>

<script setup lang="ts">
defineProps({
  text: {
    type: String,
    default: '暂无文章'
  },
  subText: {
    type: String,
    default: '这里空空如也，稍后再来看看吧~'
  }
});
</script>

<style scoped lang="less">
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--color-bg-2);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);

  .empty-icon {
    margin-bottom: 24px;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.02) translateY(-2px);
    }
  }

  .empty-text {
    color: var(--color-text-1);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .empty-subtext {
    color: var(--color-text-3);
    font-size: 14px;
    line-height: 1.6;
  }

  :deep(.refresh-btn) {
    margin-top: 20px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    background: var(--color-primary-light-1);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: var(--color-primary-light-2);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// 添加渐入和上浮动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  animation: fadeInUp 0.4s ease-out;
}

// 响应式设计
@media (max-width: 768px) {
  .empty-state {
    padding: 32px 16px;

    .empty-icon svg {
      width: 100px;
      height: 100px;
    }

    .empty-text {
      font-size: 15px;
    }

    .empty-subtext {
      font-size: 13px;
    }
  }
}
</style>
